<script setup>
import Storage from '../../tools/Storage'
// import { ElMessage } from 'element-plus'
import { ElMessage, ElMessageBox,ElLoading } from 'element-plus'
import { ref, computed,getCurrentInstance } from 'vue'
import {useRouter} from 'vue-router'
const store = Storage()
const router = useRouter()
// 用户名和密码
const name = ref("")
const password = ref("")
const disabled = computed(()=>{
    return name.value.length == 0 || password.value.length == 0;
}) 
let axios=getCurrentInstance().appContext.app.axios;
// 用户登录的方法
function login() {
    //增加了拦截器和loading窗口
    let loading
    axios.interceptors.request.use((config)=>{
        loading=ElLoading.service();
        return config;
    })
    axios.interceptors.response.use((resp)=>{
        loading.close();
        return resp;
    })
//www.teacherc.cn(域名换成这个力！之前的端口中毒了
axios({
    method:"post",
    url:"http://www.teacherc.cn/InterfaceCommonForUser/CheckUserLogin",
    data:{
        userPhone:name.value,
        userPwd:password.value,
        token:'kjxy_Interface_2025'
    }
// }).then((resp)=>{console.log(resp)});
}).then((resp)=>{
    // loading.close();
    console.log(resp)
if(resp.data.status == 600){
    //缺少业务判断，账号和密码是否正确输入
    // if(name.value=="lanyan" && password.value=="123456"){
        store.registUserInfo(name.value, password.value)
    ElMessage({
        message:'登录成功', 
        type:'success', 
        duration:1500,
        onClose:()=>{
            router.push({name:"home"})
        }
    })
    // ElMessageBox({
    //     title:"提示",
    //     message:"登录成功！",
    //     type:"success"
    // })
    // })
    // setTimeout(() => {
    //     router.push({name:"home"})
    // }, 3000);
}else{
    //增加了可手动关闭的消息框
    ElMessageBox({
        title:"提示",
        message:resp.data.msg,
        type:'warning'
        // duration:3000
    })
}
});
}
</script>
<template>
    <div id="container">
        <div id="title">
            <h1>电商后台管理系统</h1>
        </div>
        <div class="input">
            <el-input v-model="name" prefix-icon="User" placeholder="请输入用户名"></el-input>
        </div>
        <div class="input">
            <el-input v-model="password" prefix-icon="Lock" placeholder="请输入密码" auto-complete="new-password" show-password></el-input>
        </div>
        <div class="input">
            <el-button @click="login" style="width:500px" type="primary" :disabled="disabled">登录</el-button>
        </div>
    </div>
</template>
<style scoped>
#container {
    background: #595959;
    background-image: url("/public/login_bg.jpg");
    height: 100%;
    width: 100%;
    position: absolute;
}
#title {
    text-align: center;
    color: azure;
    margin-top: 200px;
}
.input {
    margin: 20px auto;
    width: 500px;
}
</style>